<template >
  <!-- <div>
    用户名：<input type="text" v-model="username" />
    <br />
    密码：<input type="password" name="" id="" v-model="password" />
    <br />
    <input type="button" value="登录" @click="Loginhe" />
  </div> -->
  <!-- //背景图片 -->
  <div class="background_style">
    <img src="../assets/99.gif" alt="" id="tututu">
    <div class="imgers">
      <div>
        <img src="../assets/33.gif" alt="">
        <div>
          <h2 id="hand">欢迎您</h2>
        </div>
        <!-- 利用element UI 来设置输入框 -->
        <el-form :rules="rules" ref="rulesform" :model="logindata">
          <el-form-item label="用户名">
            <el-input
              v-model="logindata.username"
              type="text"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="logindata.password"
              type="password"
              prefix-icon="el-icon-magic-stick"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="warning" plain @click="Loginhe">
          <i class="el-icon-thumb"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
//引入axios
// import axios from "../components/axios.js";
export default {
  //传入数据
  data() {
    return {
      logindata: {
        username: "admin",
        password: "123456",
      },

      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    Loginhe() {
      //先进性表单验证，如果验证正确，就发起请求传参数
      this.$refs.rulesform.validate((valid, backvalid) => {
        if (valid) {
          // console.log(23);
          //发起请求，传入参数
          this.$req.post("/login", this.logindata).then((res) => {
            console.log(res);
            const { data, meta } = res.data; //结构赋值，一定要看后端的属性值是什么，是meta
            if (meta.status == 400) {
              //状态为400失败
              //判断状态
              // alert("登录失败");
              this.$message.error("你脑子被驴踢了，错了哦");
            } else if (meta.status == 200) {
              //状态为200成功
              //判断状态
              // alert("登录成功啦，宝贝");
              // console.log(data);
              //将用户的数据通过  mutation 触发 userchange 方法 (事件)
              //保存到数据仓库中
              this.$store.commit("userchange", data);

              this.$message({
                message: "登录成功啦，宝贝",
                type: "success",
              });
              //用路由跳转到home页面
              this.$router.push({ path: "/home" });
              //先进性表单验证，如果验证错误，就不发起请求传参数
            } else {
              alert("参数错误");
            }
          });
        } else {
          this.$message.error("您的表单填写有误");
          return false;
        }
      });
      //表单填写成功，执行以下代码
      // function fn() {}
    },
  },
};
</script>

<style>
* {
  padding: 0px;
  margin: 0px;
}

#hand {
  font-family: "楷体";
}
.background_style {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/11.jpg");
}
.imgers {
  width: 500px;
  height: 500px;
  /* background: white; */
  position: absolute;
  left: 50%;
  top: 240px;
  border-radius: 20px;
}
#tututu{
  width: 200px;
  height: 300px;
  position: absolute;
  left: 200px;
  bottom: 200px;
}
</style>